<template>
  <div>
    <el-page-header @back="goBack" content="回复" class="back">
    </el-page-header>
   <el-card
        class="el-card"
        shadow="hover"
      >
        <el-avatar shape="square" size="large" :src="squareUrl"></el-avatar>
        <span class="name">{{ row.user_id }}</span>
        <span class="add"
          ><i class="el-icon-location-outline"></i>{{ row.address }}</span
        >&nbsp;&nbsp;&nbsp;
        <span class="add">{{ row.topic_date }}</span>
        <!-- <el-button
          type="success"
          round
          class="btn"
          size="mini"
          @click="changePower(item)"
          >修改权限</el-button
        > -->
        <div class="con">
          {{ row.topic_text }}
        </div>
        <div>
          {{ row.img }}
        </div>
        <div>
            <span  class="record" >全部回复&nbsp;&nbsp;{{this.length}}</span><br/><br/>
           <div v-for="(item,index) in list" :key="index">
              <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
            <div class="user-name">userName</div>
            <div class="replyText">{{item.reply_text}}</div>
            <div class="replyData">{{item.reply_date}}</div>
           </div>
        </div>
      </el-card>
  </div>
</template>
<script>
import util from '../lib/index'
export default {
  data() {
    return {
      row: [],
       squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        length:0,
        list:[],
    };
  },
  methods: {
    //跳转上一级
    goBack() {
      this.$router.push({
        name: '话题内容',
      });
    },
    
  },
  mounted() {
    console.log('haha')
       this.row = this.$route.params.row;
      console.log(this.row);
      util.replayAll({
        reply_public_id:this.row.topic_record_id
        }).then((res)=>{
        this.length=res.data.data.length;
        this.list=res.data.data;
         console.log(this.list);
      })
    
    },
};
</script>
<style scoped>
.back {
  /* margin-bottom: 20px; */
  position: fixed;
  top:60px;
   background-color: rgb(233, 238, 243);
   width: 100%;
   padding: 10px 0px;
   z-index: 1000;
}
.input1 {
  width: 400px;
}
.topicCon {
  position: fixed;
  top: 70px;
  background-color: rgb(233, 238, 243);
  width: 100%;
  padding: 20px 0px 10px 0px;
  margin-top: -20px;

  z-index: 10;
}
.topicTitle {
  position: absolute;
  top: 63px;
  left: 45px;
  font-weight: bolder;
  display: inline-block;
 
  height: 21px;
}
.topHot {
  color: gray;
  font-size: 10px;
  position: absolute;
  left: 45px;
  top: 86px;
  display: inline-block;
}
.topHot1 {
  color: gray;
  font-size: 10px;
  position: absolute;
  left:85px;
  top: 86px;
  display: inline-block;
}
.el-card {
  margin-top: 50px;
  width: 500px;
}
.name {
  font-weight: bolder;
  vertical-align: top;
}
.add {
  color: gray;
  font-size: 10px;
  margin-left: -10px;
}
.con {
  margin-top: 20px;
  padding: 0px 0px 10px 0px;
}
.record {
  color: blue;
  font-size: 10px;
  margin-left: -30px;
}
.btn {
  position: relative;
  right: -120px;
  top: -10px;
}
.replay-detial{
  display: inline-block;
}
.back{
margin-bottom: 20px;
}
.user-name{
display: inline-block;
  font-size: 12px;
  color: blue;
 position: relative;
 right: 0px;
 top: -15px;
}
.replyData{
  font-size: 12px;
  color: gray;
margin-left: 40px;
}
.replyText{
  position: relative;
  top: 0px;
  right: -40px;
  width: 430px;
  margin-bottom: 10px;
}
</style>